<template>
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <!-- <el-button class="fixedRight" type="primary" icon="el-icon-sort" @click="$showHide()" size="small" /> -->
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="6">
              <el-form-item label="经营模式：">
                <el-select v-model="searchParams.manage" placeholder="经营模式">
                  <el-option label="全部" value="" />
                  <el-option v-for="item in businessModelList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="业态：">
                <el-cascader v-model="searchParams.formatId" :options="formatList" :props="props" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商户名称：">
                <el-input v-model="searchParams.name" />
              </el-form-item>
            </el-col>
          </el-row>
          <SearchButton :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
        </el-form>
      </el-card>
      <div class="contain">
        <div class="right-container">
          <el-card shadow="never" class="commercia-tenant-list-title tableCard">
            <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList1}" print />
            <vxe-table
              ref="refList"
              border
              stripe
              resizable
              highlight-hover-row
              :auto-resize="true"
              :data="list"
              height="500"
              :print-config="{}"
            >
              <vxe-table-column type="seq" title=" " align="center" width="50" />
              <vxe-table-column title="Logo" width="80" align="center" slots="default">
                <template slot-scope="scope">
                  <img :src="scope.row.logo" alt="" class="logoImg">
                </template>
              </vxe-table-column>
              <vxe-table-column field="name" title="商户名称" min-width="180" />
              <vxe-table-column field="brandName" title="经营品牌" width="200" />
              <vxe-table-column field="manageName" title="经营模式" align="center" width="120" />
              <vxe-table-column field="formatIdName" title="所属业态" width="150" />
              <vxe-table-column field="bizStatusName" title="经营状态" align="center" width="100" />
              <vxe-table-column title="操作" fixed="right" width="130" slots="default">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="openModal(scope.row.id)">查看</el-button>
                  <el-button type="text" size="mini" @click="queryStaff(scope.row.id)">员工信息</el-button>
                </template>
              </vxe-table-column>
            </vxe-table>
            <vxe-pager
              :current-page.sync="searchParams.pageNum"
              :page-size.sync="searchParams.pageSize"
              :total="total"
              :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
              @page-change="getList"
            />
          </el-card>
        </div>
      </div>
    </el-main>
    <el-dialog title="商户信息" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
      <CommercialTenantEdit v-if="dialogVisible" :disabled="true" :parent-id="parentId" @close="close" />
    </el-dialog>
    <el-dialog title="店铺人员查询" :visible.sync="staffDialog" width="70%" :close-on-click-modal="false">
      <vxe-table
        ref="refList"
        border
        stripe
        resizable
        highlight-hover-row
        :auto-resize="true"
        :data="staffList"
        height="500"
      >
        <vxe-table-column field="userCode" align="center" width="150" title="员工账号" />
        <vxe-table-column field="name" align="center" width="180" title="员工姓名" />
        <vxe-table-column field="roleName" align="center" min-width="120" title="角色" />
        <vxe-table-column field="sexName" align="center" width="100" title="性别" />
        <vxe-table-column field="mobile" align="center" width="150" title="联系电话" />
        <vxe-table-column title="账号状态" width="90" slots="default">
          <template slot-scope="scope" class="linkList">
            {{ scope.row.publishStatus == 0 ? '禁用' : '启用' }}
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        :current-page.sync="staffParams.pageNum"
        :page-size.sync="staffParams.pageSize"
        :total="staffTotal"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="getStaffList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="staffDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import CommercialTenantEdit from '../mallInfoSetting/components/commercialTenantEdit'
import { getNewRemoveStoreList, searchStaffList } from '@/api/store'
import { getVersionstatTreeList } from '@/api/tenement'
import { searchAllDictionaries } from '@/api/public'
export default {
  components: {
    CommercialTenantEdit,
    SearchButton
  },
  data() {
    return {
      list: [],
      searchParams: {
        pageNum: 1,
        pageSize: 20
      },
      businessModelList: [],
      formatList: [],
      props: {
        value: 'id',
        label: 'name',
        emitPath: false
      },
      total: 1,
      parentId: '',
      dialogVisible: false,

      shopId: '',
      staffList: [],
      staffDialog: false,
      staffTotal: 1,
      staffParams: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getDicInfo()
    this.getTreeInfo()
    this.getList1()
  },
  methods: {
    getStaffList() {
      searchStaffList({ shopId: this.shopId }).then(res => {
        this.staffList = res.records
        this.staffTotal = res.total
      })
    },
    queryStaff(shopId) {
      this.shopId = shopId
      searchStaffList({ shopId }).then(res => {
        this.staffList = res.records
        this.staffTotal = res.total
        this.staffDialog = true
      })
    },
    close() {
      this.dialogVisible = false
    },
    getTreeInfo() {
      getVersionstatTreeList({ type: '1', parentId: '0' }).then(res => {
        res.unshift({ id: ' ', name: '全部', children: null })
        this.formatList = res
      })
    },
    getDicInfo() {
      searchAllDictionaries({ type: 'business_model' }).then(res => {
        this.businessModelList = res
      })
    },
    openModal(id) {
      this.parentId = id
      this.dialogVisible = true
    },
    refreshParams(params) {
      this.searchParams = params
      this.getList()
    },
    getList1() {
      this.searchParams.pageNum = 1
      this.getList()
    },
    getList() {
      getNewRemoveStoreList(this.searchParams).then(res => {
        this.list = res.records
      })
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-shop-setting_shop-initialize {
  .contain {
    display: flex;
    .right-container {
      width: 100%;
      .commercia-tenant-list-title {
        margin-bottom: 20px;
        .el-card__body {
          padding:  0;
        }
      }
    }
  }
  .logoImg {
    width: 50px;
    height: 50px;
  }
}
</style>
